<div id="opayo-form" class="form-horizontal">
  <fieldset class="opayo-payment">
    <legend>{{ text_credit_card }}</legend>
    <div id="opayo-cards" style="display: {% if cards %}block{% else %}none{% endif %}">
      <div class="row mb-3">
        <label class="col-sm-4 col-form-label">{{ entry_card }}</label>
        <div class="col-sm-8">
          <div class="form-check form-check-inline">
            <input type="radio" name="opayo_card_existing" value="1" id="input-opayo-card-existing" class="form-check-input input-opayo-card-existing" {% if cards %}checked{% endif %} />	
            <label for="input-opayo-card-existing" class="form-check-label">{{ entry_card_existing }}</label>
          </div>
          <div class="form-check form-check-inline">
            <input type="radio" name="opayo_card_existing" value="0" id="input-opayo-card-new" class="form-check-input input-opayo-card-existing" {% if not cards %}checked{% endif %} />	
            <label for="input-opayo-card-new" class="form-check-label">{{ entry_card_new }}</label>
          </div>
        </div>
      </div>
    </div>
    <div id="opayo-card-existing" style="display: {% if cards %}block{% else %}none{% endif %}">
      <div class="row mb-3 required">
        <label class="col-sm-4 col-form-label" for="input-opayo-card">{{ entry_card_choice }}</label>
        <div class="col-sm-6">
          <select name="opayo_card_token" id="input-opayo-card" class="form-select">
            {% for card in cards %}
            <option value="{{ card.token }}">{{ text_card_type }} {{ card.type }}, {{ text_card_digits }} {{ card.digits }}, {{ text_card_expiry }} {{ card.expiry }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-sm-2">
          <input type="button" value="{{ button_delete_card }}" id="opayo-button-delete-card" data-loading-text="{{ text_loading }}" class="btn btn-danger" />
        </div>
      </div>
      <div class="row mb-3 required">
        <label class="col-sm-4 col-form-label" for="input-card-cvv2">{{ entry_card_cvv2 }}</label>
        <div class="col-sm-8">
          <input type="text" name="opayo_card_cvv2_1" value="" placeholder="{{ entry_card_cvv2 }}" id="input-card-cvv2" class="form-control" />
        </div>
      </div>
    </div>
    <div id="opayo-card-new" style="display: {% if not cards %}block{% else %}none{% endif %}">
      <div class="row mb-3 required">
        <label class="col-sm-4 col-form-label" for="input-card-owner">{{ entry_card_owner }}</label>
        <div class="col-sm-8">
          <input type="text" name="opayo_card_owner" value="" placeholder="{{ entry_card_owner }}" id="input-card-owner" class="form-control" />
        </div>
      </div>
      <div class="row mb-3 required">
        <label class="col-sm-4 col-form-label" for="input-card-type">{{ entry_card_type }}</label>
        <div class="col-sm-8">
          <select name="opayo_card_type" id="input-card-type" class="form-select">
            {% for card_type in card_types %}
            <option value="{{ card_type.code }}">{{ card_type.name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="row mb-3 required">
        <label class="col-sm-4 col-form-label" for="input-card-number">{{ entry_card_number }}</label>
        <div class="col-sm-8">
          <input type="text" name="opayo_card_number" value="" placeholder="{{ entry_card_number }}" id="input-card-number" class="form-control" />
        </div>
      </div>
      <div class="row mb-3 required">
        <label class="col-sm-4 col-form-label" for="input-card-expire-date">{{ entry_card_expire_date }}</label>
        <div class="col-sm-4">
          <select name="opayo_card_expire_date_month" id="input-card-expire-date" class="form-select">
            {% for month in months %}
            <option value="{{ month.code }}">{{ month.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-sm-4">
          <select name="opayo_card_expire_date_year" class="form-select">
            {% for year in years %}
            <option value="{{ year.code }}">{{ year.name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="row mb-3 required">
        <label class="col-sm-4 col-form-label" for="input-card-cvv2">{{ entry_card_cvv2 }}</label>
        <div class="col-sm-8">
          <input type="text" name="opayo_card_cvv2_2" value="" placeholder="{{ entry_card_cvv2 }}" id="input-card-cvv2" class="form-control" />
        </div>
      </div>
      {% if logged and card_save %}
      <div class="row mb-3">
        <label class="col-sm-4 col-form-label" for="input-card-save">{{ entry_card_save }}</label>
        <div class="col-sm-4">
          <input type="checkbox" name="opayo_card_save" value="1" id="input-card-save" checked />
        </div>
      </div>
      {% endif %}
    </div>
  </fieldset>
  <div class="d-inline-block pt-2 pd-2 w-100 text-end">
    <button type="button" id="opayo-button-confirm" class="btn btn-primary opayo-button-confirm">{{ button_confirm }}</button>
  </div>
</div>
<script type="text/javascript">
updateOpayo();

function updateOpayo() {
    $('#opayo-form .input-opayo-card-existing').on('change', function() {
        if ($(this).val() == 1) {
            $('#opayo-card-existing').show();
            $('#opayo-card-new').hide();
        } else {
            $('#opayo-card-existing').hide();
            $('#opayo-card-new').show();
        }
    });
	
    $('#opayo-form #opayo-button-delete-card').on('click', function() {
        if (confirm('{{ text_confirm_delete }}')) {
            $.ajax({
                url: 'index.php?route=extension/opayo/payment/opayo{{ separator }}deleteCard&language={{ language }}',
                type: 'post',
                data: $('#opayo-card-existing :input[name=\'opayo_card_token\'),
                dataType: 'json',
                beforeSend: function() {
                    $('#opayo-button-delete-card').prop('disabled', true).addClass('loading');
                },
                complete: function() {
                    $('#opayo-button-delete-card').prop('disabled', false).removeClass('loading');
                },
                success: function(json) {
                    if (json.error) {
                        alert(json.error);
                    }
								
                    if (json.success) {
                        $('#opayo-form').load('index.php?route=extension/opayo/payment/opayo{{ separator }}getForm&language={{ language }} #opayo-form >', function() {
                            updateOpayo();
                        });
                    }
                }
            });
        }
	});
	
	$('#opayo-form #opayo-button-confirm').bind('click', function() {			
		$('#opayo-form #browser-info').remove();
			
		html = ' <div id="browser-info" > ';
		html += '<input type="hidden" name="BrowserColorDepth" value="' + window.screen.colorDepth + '" />';
		html += '<input type="hidden" name="BrowserScreenHeight" value="' + window.screen.height + '" />';
		html += '<input type="hidden" name="BrowserScreenWidth" value="' + window.screen.width + '" />';
		html += '<input type="hidden" name="BrowserTZ" value="' + new Date().getTimezoneOffset() + '" />';
		html += ' </div>';
			
		$('#opayo-form').append(html);
			
		$.ajax({
			type: 'post',
			url: 'index.php?route=extension/opayo/payment/opayo{{ separator }}confirm&language={{ language }}',
			data: $('#opayo-form input[type="radio"]:checked, #opayo-form input[type="checkbox"]:checked, #opayo-form input[type="text"], #opayo-form input[type="hidden"], #opayo-form select'),
			dataType: 'json',
			cache: false,
			beforeSend: function() {
				$('#opayo-button-confirm').prop('disabled', true).addClass('loading');
			},
			complete: function() {
				$('#opayo-button-confirm').prop('disabled', false).removeClass('loading');
			},
			success: function(json) {
				if (json.ACSURL) {
					$('#3dauth-form').remove();
					
					html = ' <form action="' + json.ACSURL + '" method="post" id="3dauth-form" > ';

					if (json.CReq) {
						html += '<input type="hidden" name="creq" value="' + json.CReq + '" />';
					}
						
					if (json.ACSTransID) {
						html += '<input type="hidden" name="acsTransID" value="' + json.ACSTransID + '" />';
					}
						
					if (json.DSTransID) {
						html += '<input type="hidden" name="dsTransID" value="' + json.DSTransID + '" />';
					}
						
					if (json.MD) {
						html += '<input type="hidden" name="MD" value="' + json.MD + '" />';
					}
						
					if (json.PaReq) {
						html += '<input type="hidden" name="PaReq" value="' + json.PaReq + '" />';
					}
						
					html += '<input type="hidden" name="TermUrl" value="' + json.TermUrl + '" />';
					html += ' </form>';
						
					$('#opayo-form').append(html);
					$('#3dauth-form').submit();
				}
				
				if (json.error) {
					alert(json.error);
				}
                
				if (json.redirect) {
					location = json.redirect;
				}
			},
			error: function(xhr, ajaxOptions, thrownError) {
				console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
			}
		});
	});
}
</script>